<template>
  <div class="container border-bottom">
    <div class="top">评论 ({{Object.keys(list).length}})</div>
    <transition-group name="comment" mode="out-in">
      <comment-item
        v-for="(value,key) of list"
        :key="JSON.stringify(value)"
        :content="value"
        :id="key"
        @delete="deleteComment"
        class="comment-item"
      />
    </transition-group>
  </div>
</template>
<script>
import CommentItem from './CommentItem'
export default {
  name: 'CommentForMyComment',
  props: {
    list: Array
  },
  components: {
    CommentItem
  },
  methods: {
    deleteComment (id, time) {
      this.$emit('delete', id, time)
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .comment-item
    transition: all 1s
  .comment-enter, .comment-leave-to
    opacity: 0;
    transform: translateX(.5rem);
  .comment-leave-active
    position: relative
  .container
    width: 100%
    padding-bottom: .75rem
    transition: all 1s
    .top
      background: orange
      color: #ffffff
      width: 1.3rem
      line-height: .4rem
      font-size: .25rem
      text-align:center
      margin-bottom: .2rem
</style>
